@import "colors";

// base colors:
// inherit theme-color
$theme-color: darken($theme-color, 6);
$base-color: mix(#808080, invert($theme-color), 95);

// core colors:
$black: lighten($base-color, 44%);
$darkest: mix($black, $base-color, 80%);
$darker: mix($black, $base-color, 64%);
$dark: mix($black, $base-color, 35%);

$mid: $base-color;

$white: darken($base-color, 45%);
$lightest: mix($white, $base-color, 92%);
$lighter: mix($white, $base-color, 78%);
$light: mix($white, $base-color, 50%);

// doc colors:
$doc-black: $white;
$doc-darkest: mix($doc-black, $base-color, 80%);
$doc-darker: mix($doc-black, $base-color, 64%);
$doc-dark: mix($doc-black, $base-color, 35%);

$doc-mid: $base-color;

$doc-white: mix($black, $base-color, 90%);
$doc-lightest: mix($doc-white, $base-color, 92%);
$doc-lighter: mix($doc-white, $base-color, 78%);
$doc-light: mix($doc-white, $base-color, 50%);

// control colors:
$title-bg: $doc-light;
$tooltip-bg: rgba($doc-black,0.9);
$selected-stroke-color: rgba($doc-black, 0.4);
$match-color: rgba($theme-color, 0.45);
$dark-shadow: rgba(0,0,0, 0.25);
$light-shadow: rgba(0,0,0, 0.1);
$strong-shadow: rgba(0,0,0, 0.35);

// syntax coloring:
// inherited

// invisible char color:
// inherited
